@import "./minxin";
.clipping{
    height: 720px;
    .clipping_banxin{
        @include banxin();
        position: relative;
        // 上边标题
        .clipping_top{
            padding-top: 40px;
            display: flex;
            justify-content: space-between;
            // 毛球修改器
            span{
                font-size: 20px;
                font-weight: 400;
                color: #333;
            }
            // 更多....  盒子- 
            div{
                cursor: pointer;
                display: flex;
                align-items: center;
                // 更多
                span{
                    font-size: 16px;
                    font-weight: 400;
                    margin-right: 10px;
                    color: grey;
                }
                // 箭头图
                img{
                    width: 16px;
                    height: 16px;
                }
            }
        }
        // 商品盒子
        .clipping_info{
            position: relative;
            width: 100%;
            height: 33px;
            // background-color: yellowgreen;
            // 每个商品的盒子
            .clipping_info_box{
                position: absolute;
                top: 33px;
                width: 360px;
                height: 296px;
                display: flex;
                cursor: pointer;
                background: url("https://www.flyco.com/webpack/20210518163812679/img/trimmerBg.e9b3e45e.png");
                // 商品图片的盒子
                .info_box_pic{
                    overflow: hidden;
                    position: absolute;
                    margin-top: -100px;
                    margin-left: -100px;
                    top: 50%;
                    left: 50%;
                    width: 200px;
                    height: 200px;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
                // 遮罩层
                .info_box_hide{
                    // 全透明
                    opacity: 0;
                    position: absolute;
                    margin-top: -110px;
                    margin-left: -110px;
                    background: white;
                    top: 50%;
                    left: 50%;
                    width: 220px;
                    height: 220px;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    .info_box_hide_top{
                        font-weight: 600;
                    }
                    .info_box_hide_cen{
                        font-size: 12px;
                        color: grey;
                        width: 270px;
                        text-align: center;
                        margin: 12px 0 24px 0;
                    }
                    .info_box_hide_price{
                        color: red;
                        span{
                            font-size: 14px;
                        }
                        strong{
                            font-size: 20px;
                        }
                    }
                }
            }
            .clipping_info_box img{
                transition: all 1.4s;
            }
            // 透明度滑动效果
            .clipping_info_box .info_box_hide{
                transition: opacity 1s;
            }
            // 图片缩放滑动效果
            .clipping_info_box:hover img{
                transform: scale(1.2) ;
            }
            .clipping_info_box:hover .info_box_hide{
                opacity: 1;
            }
            .clipping_info_box2{
                top: 335px;
            }
            .clipping_info_box3{
                top: 185px;
                left: 275px;
            }
            .clipping_info_box4{
                top: 30px;
                left: 550px;
            }
            .clipping_info_box5{
                top: 335px;
                left: 550px;
            }
            .clipping_info_box6{
                top: 184px;
                left: 825px;
            }
        }

    }
}